<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>火调大模型驾驶舱 - 火灾调查知识库平台</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Element Plus -->
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/element-plus"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <!-- ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <style>
        .chart-container {
            width: 100%;
            height: 300px;
        }
        .map-container {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div id="app">
        <!-- 顶部导航栏 -->
        <nav class="bg-white shadow-md">
            <div class="container mx-auto px-6 py-3">
                <div class="flex items-center justify-between">
                    <div class="flex items-center">
                        <a href="index.html">
                            <img src="logo.png" alt="Logo" class="h-8 w-auto">
                        </a>
                        <span class="ml-3 text-xl font-semibold text-gray-800">火灾调查知识库平台</span>
                    </div>
                    <div class="flex items-center space-x-6">
                        <a href="search.html" class="nav-item"><i class="fas fa-search mr-1"></i>检索</a>
                        <a href="knowledge-graph.html" class="nav-item"><i class="fas fa-project-diagram mr-1"></i>火调知识图谱</a>
                        <a href="ai-search.html" class="nav-item"><i class="fas fa-robot mr-1"></i>AI检索功能</a>
                        <a href="report.html" class="nav-item"><i class="fas fa-file-alt mr-1"></i>火调报告生成</a>
                        <a href="dashboard.html" class="nav-item active"><i class="fas fa-tachometer-alt mr-1"></i>火调大模型驾驶舱</a>
                        <div class="border-l border-gray-300 h-6"></div>
                        <a href="profile.html" class="nav-item"><i class="fas fa-user mr-1"></i>个人中心</a>
                        <button class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-md hover:bg-blue-700">登录</button>
                        <button class="px-4 py-2 text-sm font-medium text-blue-600 border border-blue-600 rounded-md hover:bg-blue-50">注册</button>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 主要内容区域 -->
        <main class="container mx-auto px-6 py-8">
            <!-- 顶部统计卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <div class="flex items-center">
                        <div class="p-3 bg-blue-100 rounded-full">
                            <i class="fas fa-fire text-blue-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-gray-500 text-sm">今日火灾事故</h4>
                            <div class="flex items-center">
                                <p class="text-2xl font-semibold">28</p>
                                <span class="text-green-500 text-sm ml-2">
                                    <i class="fas fa-arrow-down"></i> 12%
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm p-6">
                    <div class="flex items-center">
                        <div class="p-3 bg-green-100 rounded-full">
                            <i class="fas fa-file-alt text-green-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-gray-500 text-sm">调查报告完成率</h4>
                            <div class="flex items-center">
                                <p class="text-2xl font-semibold">92%</p>
                                <span class="text-green-500 text-sm ml-2">
                                    <i class="fas fa-arrow-up"></i> 5%
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm p-6">
                    <div class="flex items-center">
                        <div class="p-3 bg-purple-100 rounded-full">
                            <i class="fas fa-clock text-purple-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-gray-500 text-sm">平均响应时间</h4>
                            <div class="flex items-center">
                                <p class="text-2xl font-semibold">8.5分钟</p>
                                <span class="text-red-500 text-sm ml-2">
                                    <i class="fas fa-arrow-up"></i> 2%
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-lg shadow-sm p-6">
                    <div class="flex items-center">
                        <div class="p-3 bg-red-100 rounded-full">
                            <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                        </div>
                        <div class="ml-4">
                            <h4 class="text-gray-500 text-sm">高风险预警</h4>
                            <div class="flex items-center">
                                <p class="text-2xl font-semibold">15</p>
                                <span class="text-red-500 text-sm ml-2">
                                    <i class="fas fa-arrow-up"></i> 8%
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 地图和趋势图 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
                <!-- 地图 -->
                <div class="lg:col-span-2 bg-white rounded-lg shadow-sm p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-lg font-semibold">火灾分布地图</h3>
                        <el-select v-model="mapType" placeholder="选择地图类型" class="w-32">
                            <el-option label="热力图" value="heatmap"></el-option>
                            <el-option label="标记点" value="marker"></el-option>
                        </el-select>
                    </div>
                    <div id="mapContainer" class="map-container"></div>
                </div>

                <!-- 趋势图 -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <div class="flex justify-between items-center mb-6">
                        <h3 class="text-lg font-semibold">火灾趋势</h3>
                        <el-select v-model="trendPeriod" placeholder="选择时间" class="w-32">
                            <el-option label="近7天" value="7d"></el-option>
                            <el-option label="近30天" value="30d"></el-option>
                            <el-option label="近90天" value="90d"></el-option>
                        </el-select>
                    </div>
                    <div id="trendChart" class="chart-container"></div>
                </div>
            </div>

            <!-- 分析图表 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <!-- 火灾类型分布 -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h3 class="text-lg font-semibold mb-6">火灾类型分布</h3>
                    <div id="typeChart" class="chart-container"></div>
                </div>

                <!-- 原因分析 -->
                <div class="bg-white rounded-lg shadow-sm p-6">
                    <h3 class="text-lg font-semibold mb-6">火灾原因分析</h3>
                    <div id="causeChart" class="chart-container"></div>
                </div>
            </div>

            <!-- 实时监控 -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-lg font-semibold">实时监控</h3>
                    <el-button-group>
                        <el-button size="small" @click="refreshMonitor">
                            <i class="fas fa-sync-alt mr-1"></i> 刷新
                        </el-button>
                        <el-button size="small" type="primary" @click="exportMonitor">
                            <i class="fas fa-download mr-1"></i> 导出
                        </el-button>
                    </el-button-group>
                </div>

                <el-table :data="monitorData" style="width: 100%">
                    <el-table-column prop="time" label="时间" width="180"></el-table-column>
                    <el-table-column prop="location" label="地点" width="200"></el-table-column>
                    <el-table-column prop="type" label="类型" width="150"></el-table-column>
                    <el-table-column prop="status" label="状态" width="120">
                        <template #default="scope">
                            <el-tag :type="scope.row.status === '处理中' ? 'warning' : 'success'">
                                {{ scope.row.status }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="handler" label="处理人" width="120"></el-table-column>
                    <el-table-column prop="description" label="描述"></el-table-column>
                    <el-table-column label="操作" width="150">
                        <template #default="scope">
                            <el-button type="text" size="small" @click="viewDetail(scope.row)">查看</el-button>
                            <el-button type="text" size="small" @click="handleCase(scope.row)">处理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </main>
    </div>

    <script>
        const { createApp, ref, onMounted } = Vue
        const app = createApp({
            setup() {
                const mapType = ref('heatmap')
                const trendPeriod = ref('7d')
                
                // 监控数据
                const monitorData = ref([
                    {
                        time: '2024-01-20 14:30',
                        location: '北京市朝阳区建国路',
                        type: '电气火灾',
                        status: '处理中',
                        handler: '张工',
                        description: '商场电气设备起火'
                    },
                    {
                        time: '2024-01-20 13:15',
                        location: '北京市海淀区中关村',
                        type: '实验室火灾',
                        status: '已完成',
                        handler: '李工',
                        description: '化学实验室意外起火'
                    }
                ])

                // 初始化图表
                onMounted(() => {
                    initMap()
                    initTrendChart()
                    initTypeChart()
                    initCauseChart()
                })

                const initMap = () => {
                    const map = echarts.init(document.getElementById('mapContainer'))
                    // 配置地图选项...
                }

                const initTrendChart = () => {
                    const chart = echarts.init(document.getElementById('trendChart'))
                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            type: 'category',
                            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [12, 15, 8, 23, 18, 10, 14],
                            type: 'line',
                            smooth: true
                        }]
                    }
                    chart.setOption(option)
                }

                const initTypeChart = () => {
                    const chart = echarts.init(document.getElementById('typeChart'))
                    const option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            right: 10,
                            top: 'center'
                        },
                        series: [
                            {
                                name: '火灾类型',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '20',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: 1048, name: '电气火灾' },
                                    { value: 735, name: '燃气火灾' },
                                    { value: 580, name: '化学品火灾' },
                                    { value: 484, name: '森林火灾' },
                                    { value: 300, name: '其他' }
                                ]
                            }
                        ]
                    }
                    chart.setOption(option)
                }

                const initCauseChart = () => {
                    const chart = echarts.init(document.getElementById('causeChart'))
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: ['电路故障', '人为纵火', '设备老化', '操作不当', '自然因素'],
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '火灾原因',
                                type: 'bar',
                                barWidth: '60%',
                                data: [450, 280, 320, 180, 120]
                            }
                        ]
                    }
                    chart.setOption(option)
                }

                // 方法
                const refreshMonitor = () => {
                    console.log('刷新监控数据')
                }

                const exportMonitor = () => {
                    console.log('导出监控数据')
                }

                const viewDetail = (row) => {
                    console.log('查看详情', row)
                }

                const handleCase = (row) => {
                    console.log('处理案件', row)
                }

                return {
                    mapType,
                    trendPeriod,
                    monitorData,
                    refreshMonitor,
                    exportMonitor,
                    viewDetail,
                    handleCase
                }
            }
        })

        app.use(ElementPlus)
        app.mount('#app')
    </script>
</body>
</html> 